import React from 'react';
import styles from './index.less';
import { kache } from './mock/kache' // 卡车mock数据
import { lmd } from './mock/lmd'    // 龙门吊mock数据
import { brid } from './mock/brid'  // 桥吊mock数据
import { dist } from './mock/dist'  // 桥吊mock数据
import { dataMap } from './mock/jk'  // 初始请求数据
// import { Button } from 'antd';
import { Menu, Input } from 'antd';
import { SwapOutlined } from '@ant-design/icons';
import Sidebar from '@/components/basicComp/Sidebar'

const { SubMenu } = Menu;


import L from 'leaflet';
import { getMapInfo, getTruckAll, getGantryCraneAll, getTravellingBridgeAll, getResourceDistributionResult, getTruckScheduleResultList, getWiScheduleResultList, getTargetLongitudeAndLatitude, getDeviceRatioResult, getRedisResult } from './api';
var apiUrl = process.env.apiUrl;
import {
  drawForbiddenZone,
  drawRoadEdge,
  drawExtraPoint,
  drawRoad,
  drawPavement,
  drawConnection,
  drawgetTruck,
  drawgetTruckAll,
  latLonLists,
  drawGantryCrane,
  drawGantryCraneAll,
  drawTravellingBridge,
  drawTravellingBridgeAll,
  jkCoordinate,
  jkAllCoordinate,
} from './service';
// import { await } from '@umijs/deps/compiled/signale';
// import { await } from '@umijs/deps/compiled/signale';

export default class extends React.Component {
  state = {
    map: null,                     //地图对象
    mapinfo: {},                  //后台返回的数据信息
    common: [],                   // 卡车路线全部数据
    cloneTruck: [],
    comData: [],                  // 卡车路线选中数据
    gantryCraneData: {},          //龙门吊接口返回数据
    longmen: [],                   // 龙门吊全部数据
    longmenData: [],                  // 龙门吊选中数据
    travellingBridgeData: {},        // 桥吊数据
    tBridge: [],                     // 桥吊全部数据
    tBridgeData: [],                  // 桥吊选中数据
    resourceDistributionData: {},     // 资源计划结果
    resourceDistributionList: [],    // 资源计划结果导航展示数据
    resourceDistributionSelect: {}, // 资源计划结果选中
    truckScheduleResultList:[],       //集卡调度结果
    truckScheduleResultData:[],       //集卡调度结果
    truckScheduleResultListSelect:[],       //集卡调度结果选中
    wiScheduleResultList:[],       //指令调度结果
    wiScheduleResultData:[],       //指令调度结果
    wiScheduleResultListSelect:[],       //指令调度结果选中
    truckKey: ['0'],                   //卡车选中项
    longmenKey: ['0'],                 // 龙门吊导航选中项
    tBridgeKey: ['0'],                 // 桥吊导航选中项
    resourceDistriKey: ['0'],
    truckScheduleKey: ['0'],
    drawerData: [],                    // 抽屉展示数据
    // 一些开关
    checkedRoadEdge: true,
    checkedForbiddenZone: true,
    checkedExtraPoint: true,
    checkedPavement: true,
    open: false,
    openKeys: [],
    openGT: false,
    upDateTime: null,                   // 更新时间
    targetTop: true,
    deviceRatioResult: {},
    systemTime:'',               //系统时间
  };
  componentDidMount = () => {
    // 接口请求时间太久，可以用mock开发
    // var getTruckRes = kache()
    // getTruckRes.unshift({
    //   truckId: '查看全部',
    //   firstLatLonList: null
    // })

    // var getResourceDistributionResult = dist()
    // var resourceDistributionList = getResourceDistributionResult.truckDistributions

    // var getGantryCraneResData = lmd()
    // var getGantryCraneResList = getGantryCraneResData.result
    // getGantryCraneResList.forEach((item, key) => {
    //   if (item && item.length) {
    //     item.forEach((it, index) => {
    //       it.ids = 'in' + key + index,
    //         it.indexs = key + 1 + ''
    //     })
    //   }
    // })
    // getGantryCraneResList.unshift({
    //   "gantryID": "查看全部",
    //   "fence": null
    // })
    // var getTravellingBridgeResData = brid()
    // var getTravellingBridgeResList = getTravellingBridgeResData.result
    // getTravellingBridgeResList.forEach((item, key) => {
    //   if (item && item.length) {
    //     item.forEach((it, index) => {
    //       it.ids = 'ik' + key + index
    //       it.indexs = key + 1 + ''
    //     })
    //   }
    // })
    // getTravellingBridgeResList.unshift({
    //   "craneId": "查看全部",
    //   "fence": null
    // })
    // this.setState({
    //   common: getTruckRes,
    //   comData: getTruckRes[0],
    //   gantryCraneData: getGantryCraneResData,
    //   longmen: getGantryCraneResList,
    //   longmenData: getGantryCraneResList[0],
    //   travellingBridgeData: getTravellingBridgeResData,
    //   tBridge: getTravellingBridgeResList,
    //   tBridgeData: getTravellingBridgeResList[0],
    //   resourceDistributionData: getResourceDistributionResult,
    //   resourceDistributionList: resourceDistributionList,
    //   upDateTime: lmd().dataUpdateTime || brid().dataUpdateTime
    // })
    this.initMap();
    getRedisResult().then((data)=>{
      if(data){
        this.setState({
          systemTime:data
        })
      }
      this.getMapInfo();
      this.getDeviceRatioResultInfo()
    })
  };
  // 初始化地图
  initMap = () => {
    


    var labelTextCollision = new L.LabelTextCollision({
      collisionFlg: true,
    });

    const url = `${apiUrl}/tile/ms/{z}/{x}/{y}`;

    var leafletMap = L.map('map-div', {
      drawControl: true,
      center: [29.773574, 122.005877],      // 经纬度
      zoom: 15,
      zoomControl: false,
      attributionControl: false,            //属性控制，右下角版权信息
      crs: L.CRS.EPSG3857,
      renderer: labelTextCollision,
    });

    this.setState({ map: leafletMap })

    labelTextCollision.options.collisionFlg = false;
    leafletMap.fitBounds(leafletMap.getBounds());
    // L.control.zoom({ zoomInTitle: '放大', zoomOutTitle: '缩小', position: 'topright' }).addTo(leafletMap);
    L.tileLayer(url, {
      maxZoom: 19,
      id: 'mapbox.streets',
    }).addTo(leafletMap);

  };
  // 获取指标结果
  getDeviceRatioResultInfo = async () => {
    var getDevice = await getDeviceRatioResult();
    this.setState({
      deviceRatioResult: getDevice
    })
  }
  // 转换卡车状态
  filterState = (type) => {
    return type === 'CHARGE' ? '——充电' : type === 'LOAD' ? '——装船' : type === 'UNLOAD' ? '——卸船' : ''
  }
  // 获取地图信息
  getMapInfo = async () => {
    // var rs = await getMapInfo();
    var rs = dataMap()
    this.setState({ mapinfo: rs }, async () => {
      this.drawMap();
      //临时
      this.drawCoverage();
      //---------------------
      // 请求卡车数据
      // var getTruckRes = kache();
      var getTruckRes = await getTruckAll();
      if (getTruckRes && getTruckRes.length) {
        getTruckRes.forEach(item => {
          item.types = item.action === 'CHARGE' ? '充电' : item.action === 'LOAD' ? '装船' : item.action === 'UNLOAD' ? '卸船' : ''
        })
      }
      getTruckRes.unshift({
        truckId: '查看全部',
        firstLatLonList: null,
        ty:'jk'
      })
      //请求龙门吊数据
      var getGantryCraneRes = await getGantryCraneAll();
      // var getGantryCraneRes = lmd()
      var getGantryCraneResList = getGantryCraneRes.result
      var isGanCrane = getGantryCraneResList && getGantryCraneResList.length
      if (isGanCrane) {
        getGantryCraneResList.forEach((item, key) => {
          if (item && item.length) {
            item.forEach((it, index) => {
              it.ids = 'in' + key + index,
                it.indexs = key + 1 + ''
            })
          }
        })
        getGantryCraneResList.unshift({
          "gantryID": "查看全部",
          "fence": null,
          "ty":'lmd'
        })
      }
      //请求桥吊数据
      var getTravellingBridgeRes = await getTravellingBridgeAll();
      // 桥吊数据数组
      var getTravellingBridgeResList = getTravellingBridgeRes.result
      var isTravellingBridge = getTravellingBridgeResList && getTravellingBridgeResList.length
      if (isTravellingBridge) {
        // 添加唯一keys 
        getTravellingBridgeResList.forEach((item, key) => {
          if (item && item.length) {
            item.forEach((it, index) => {
              // ids 用于menu导航唯一key
              // indexs 用于menu导航受控openKeys  点击地图坐标自动打开定位到导航某一项的key
              it.ids = 'ik' + key + index,
                it.indexs = key + 1 + ''
            })
          }
        })
        // 添加查看全部
        getTravellingBridgeResList.unshift({
          "craneId": "查看全部",
          "fence": null
        })
      }
      // 请求指令
      var resourceDistributionData = await getResourceDistributionResult();
      var resourceDistributionList = resourceDistributionData.truckDistributions;
      // 集卡调度结果 getTruckScheduleResultList
      var truckScheduleResultList = await getTruckScheduleResultList();
      //----
      console.log(truckScheduleResultList,9)
      //----
      // 指令调度结果 getWiScheduleResultList
      var wiScheduleResultList = await getWiScheduleResultList();
      this.setState({
        common: getTruckRes, // 全部卡车数据
        cloneTruck: getTruckRes,//克隆全部卡车数据
        comData: getTruckRes.length ? getTruckRes[0] : [], // 当前选中卡车一项数据
        gantryCraneData: getGantryCraneRes,               //龙门吊接口返回结果
        longmen: isGanCrane ? getGantryCraneResList : [], // 全部龙门吊展示数据
        longmenData: isGanCrane ? getGantryCraneResList[0] : [], // 当前选中龙门吊一项数据
        travellingBridgeData: getTravellingBridgeRes,       // 桥吊接口返回结果
        resourceDistributionData: resourceDistributionData, // 
        resourceDistributionList: resourceDistributionList,// 
        truckScheduleResultList:truckScheduleResultList,   //集卡调度结果
        truckScheduleResultData:truckScheduleResultList,   //集卡调度结果
        wiScheduleResultList:wiScheduleResultList,   //指令调度结果
        wiScheduleResultData:wiScheduleResultList,   //指令调度结果
        tBridge: isTravellingBridge ? getTravellingBridgeResList : [], // 全部桥吊展示数据
        tBridgeData: isTravellingBridge ? getTravellingBridgeResList[0] : [], // 当前选中一项桥吊数据
        upDateTime: getGantryCraneRes.dataUpdateTime || getTravellingBridgeRes.dataUpdateTime // 更新时间，取龙门吊桥吊随便一条即可
      }, () => {
        // 绘制卡车、龙门吊、桥吊
        this.drawCoverage();
      });
      //----------------------
    });
  };
  //过滤重复数据
  getFilterDataList = (list, value) => {
    var obj = {};
    var arr = list.reduce((a, b) => {
      obj[b[value]] ? '' : obj[b[value]] = true && a.push(b);
      return a
    }, [])
    return arr
  }
  // 根据mapinfo信息，绘制地图
  drawMap = (params = {}) => {
    const { state } = this
    var mapinfo = {
      ...state.mapinfo,
      ...params,
    };

    const {
      nodeMap,                //节点地图
      forbiddenZones,         //禁区
      roadEdges,              //道路边缘
      extraPoints,            //扩展点
      laneMarkers,            //路标信息
      pavements,              //路面信息
      connections,            //连接信息
      sections,               //路段信息
    } = mapinfo

    // 路标ID 映射
    const laneMarkerMap = {};
    for (let i = 0; i < laneMarkers.length; i++) {
      const { id, nds } = laneMarkers[i];
      laneMarkerMap[id] = laneMarkers[i];
    }

    // 绘制禁区
    if (state.checkedForbiddenZone) drawForbiddenZone(this)

    //红色无法驶入的区域
    if (state.checkedRoadEdge) drawRoadEdge(this)

    //绘制扩展点
    if (state.checkedExtraPoint) drawExtraPoint(this)

    //绘制路段
    drawRoad(this, laneMarkerMap)

    //绘制路面
    if (state.checkedPavement) drawPavement(this)

    //绘制连接
    drawConnection(this)

  };
  drawCoverage = () => {
    const { state } = this
    // 绘制卡车路线
    // if (state.comData) drawgetTruck(this)
    if (state.common) drawgetTruckAll(this)

    // 绘制全部龙门吊
    if (state.longmen) drawGantryCraneAll(this)
    // 绘制全部桥吊
    if (state.tBridge) drawTravellingBridgeAll(this)
  }
  filterLenght = () => {
    const { common, longmen, tBridge, resourceDistributionData } = this.state
    return common.length || longmen.length || tBridge.length
  }
  bridgeClick = (data) => {
    this.setState({
      tBridgeData: data,
      longmenData: [],
      comData: [],
      resourceDistributionSelect: [],
      truckScheduleResultListSelect:[],
      wiScheduleResultListSelect:[],
      open: true,
      tBridgeKey: [data[0].ids],
      openKeys: [data[0].ids, data[0].indexs, 'qd']
    })
  }
  // 点击龙门吊地图图标
  longmenClick = (data) => {
    this.setState({
      longmenData: data,
      comData: [],
      tBridgeData: [],
      resourceDistributionSelect: [],
      truckScheduleResultListSelect:[],
      wiScheduleResultListSelect:[],
      open: true,
      longmenKey: [data[0].ids],
      openKeys: [data[0].ids, data[0].indexs, 'lmd']
    })
  }
  comClick = (data) => {
    this.setState({
      longmenData: [],
      comData: data,
      tBridgeData: [],
      resourceDistributionSelect: [],
      truckScheduleResultListSelect:[],
      wiScheduleResultListSelect:[],
      open: true,
      truckKey: [data[0].truckId],
      openKeys: [data[0].truckId, data[0].truckId, 'truck']
    })
  }
  // 桥吊搜索过滤
  filterSearchQd = (value) => {
    const { travellingBridgeData } = this.state
    const tBrideFilter = travellingBridgeData.result.filter(item => {
      if (value) {
        if (item instanceof Array && item.length) {
          const items = item[0]
          if (items.craneId.indexOf(value.toUpperCase()) !== -1) {
            return item
          }
        }
      } else {
        return item
      }
    })
    this.setState({
      tBridge: tBrideFilter
    })
    // console.log(value, tBridge)
  }
  // 龙门吊搜索过滤
  filterSearchLmd = (value) => {
    const { gantryCraneData } = this.state
    const longmenFilter = gantryCraneData.result.filter(item => {
      if (value) {
        if (item instanceof Array && item.length) {
          const items = item[0]
          if (items.gantryID.indexOf(value.toUpperCase()) !== -1) {
            return item
          }
        }
      } else {
        return item
      }
    })
    this.setState({
      longmen: longmenFilter
    })
    // console.log(value, tBridge)
  }
  // 资源计划结果搜索过滤
  filterSearchZl = (value) => {
    const { resourceDistributionData } = this.state
    const resourceDistFilter = resourceDistributionData.truckDistributions.filter(item => {
      if (value) {
        if (item.powID.indexOf(value.toUpperCase()) !== -1) {
          return item
        }
      } else {
        return item
      }
    })
    this.setState({
      resourceDistributionList: resourceDistFilter
    })
  }
  // 集卡结果搜索过滤
  filterSearchJK = (value) => {
    const { truckScheduleResultData } = this.state
    const ruckScheduleFilter = truckScheduleResultData.filter(item => {
      if (value) {
        if (item.truckId.indexOf(value.toUpperCase()) !== -1) {
          return item
        }
      } else {
        return item
      }
    })
    this.setState({
      truckScheduleResultList: ruckScheduleFilter
    })
  }
  // 指令调度搜索过滤
  filterSearchDD = (value) => {
    const { wiScheduleResultData } = this.state
    const iScheduleResultFilter = wiScheduleResultData.filter(item => {
      if (value) {
        if (item.wino.toString().indexOf(value.toUpperCase()) !== -1) {
          return item
        }
      } else {
        return item
      }
    })
    this.setState({
      wiScheduleResultList: iScheduleResultFilter
    })
  }
  // 卡车搜索过滤
  filterSearchKc = (value) => {
    const { cloneTruck } = this.state
    const truckFilter = cloneTruck.filter(item => {
      if (value && item.truckId !== '查看全部') {
        if (item.truckId.indexOf(value.toUpperCase()) !== -1 || item.types.indexOf(value) !== -1 || item.firstEndTime.indexOf(value) !== -1) {
          return item
        }
      } else {
        return item
      }
    })
    this.setState({
      common: truckFilter
    })
  }
  render() {
    const { comData, common, longmen, tBridge, open, openGT, longmenData, tBridgeData, upDateTime, truckKey, longmenKey, tBridgeKey, openKeys, resourceDistributionList, resourceDistributionSelect, resourceDistributionData, truckScheduleResultList, truckScheduleResultListSelect, wiScheduleResultList, wiScheduleResultListSelect, targetTop, deviceRatioResult, systemTime } = this.state
    return <div style={{ position: 'relative', overflow: 'hidden' }}>
      {systemTime?<Sidebar comData={comData?comData:[]} open={open} upDateTime={upDateTime} longmenData={longmenData} resourceDistributionSelect={resourceDistributionSelect} tBridgeData={tBridgeData} truckScheduleResultListSelect={truckScheduleResultListSelect} wiScheduleResultListSelect={wiScheduleResultListSelect} Jthis={this} systemTime={systemTime} close={() => {
        this.setState({
          open: !open
        })
      }} />:null}
      {
        this.filterLenght() ?
          <div className={styles.bob}>
            {targetTop?<div className={styles.box}>
              <div>
                <div>
                  <p>船时效率（自然箱/时）：</p>
                  <span>{deviceRatioResult.work_ratio}</span>
                </div>
                <div>
                  <p>在泊效率（自然箱/时）：</p>
                  <span>{deviceRatioResult.berth_ratio}</span>
                </div>
                <div>
                  <p>桥吊单机效率（自然箱/时）：</p>
                  <span>{deviceRatioResult.cr_ratio}</span>
                </div>
                <div>
                  <p>龙门吊小时作业量（自然箱/时）：</p>
                  <span>{deviceRatioResult.rt_ratio}</span>
                </div>
              </div>
              <div>
                <div>
                  <p>集卡利用率（TEU/时）：</p>
                  <span>{deviceRatioResult.truck_ratio}</span>
                </div>
                <div>
                  <p>集卡箱区平均通过时间（分钟）：</p>
                  <span>{deviceRatioResult.truck_travel}</span>
                </div>
                <div>
                  <p>集卡箱区平均等待时间（分钟）：</p>
                  <span>{deviceRatioResult.truck_wait}</span>
                </div>
                <div>
                  <p>进箱一小时率 ：</p>
                  <span>{deviceRatioResult.loading_ratio}</span>
                </div>
              </div>
            </div>:null}
            <div className={styles.ss} onClick={()=>{this.setState({targetTop:!targetTop})}}><SwapOutlined /></div>
            <div className={styles.resHint}>
              <div className={styles.resItem}>
                {/* <div className={styles.stateBox}></div> */}
                <img src={require('../../assets/qd.png')} alt="" />
                <div className={styles.names}>桥吊</div>
              </div>
              <div className={styles.resItem}>
                {/* <div className={styles.stateBox} style={{ background: '#ff5e00' }}></div> */}
                <img src={require('../../assets/lmd.png')} alt="" />
                <div className={styles.names}>龙门吊</div>
              </div>
              <div className={styles.resItem}>
                {/* <div className={styles.lineBox}>——</div> */}
                <img src={require('../../assets/alltruck.png')} alt="" />
                <div className={styles.names}>集卡路线</div>
                {resourceDistributionData.remainTruck && <div className={styles.namesitem}>多余集卡数量：<span>{resourceDistributionData.remainTruck.remainTruckNum}</span></div>}
                {resourceDistributionData.remainTruck && <div className={styles.namesitem}>可用集卡总数：<span>{resourceDistributionData.remainTruck.usableTruckNum}</span></div>}
              </div>
            </div>
          </div> : null
      }
      {
        this.filterLenght() ?
          <div className={styles.menuWrap}>
            <div><img src={require('../../assets/logo.jpg')} alt="" style={{width:'256px'}} /></div>
            <Menu
              onSelect={(val) => {
                if (val.key === '0') {
                  this.setState({
                    comData: {ty:'jk'},
                    truckKey: val.selectedKeys,
                    //
                    longmenData: [],
                    open: true,
                    tBridgeData: [],
                    openGT: false
                  }, () => {
                    drawgetTruckAll(this)
                  })
                } else {
                  // var flootList = common[val.keyPath[1]];
                  // console.log(flootList,987,common)
                  // var filterData = flootList.filter(item => item.ids === val.key)
                  this.setState({
                    comData: common[val.key],
                    truckKey: val.selectedKeys,
                    longmenData: [],
                    // comData: filterData,
                    open: true,
                    resourceDistributionSelect: [],
                    truckScheduleResultListSelect:[],
                    wiScheduleResultListSelect:[],
                    tBridgeData: [],
                    openGT: false
                  }, () => {
                    drawgetTruck(this)
                  })
                }

              }}
              onClick={(val) => {
                if (val.key == truckKey[0]) {
                  this.setState({
                    comData: {},
                    truckKey: [],
                    longmenData: [],
                    comData: [],
                    open: false,
                    openGT: false
                  }, () => {
                    drawgetTruck(this)
                  })
                }
              }}
              style={{ width: 256 }}
              selectedKeys={truckKey}
              mode="inline"
            >
              <SubMenu key="truck" title="集卡路径规划">
                <Menu.Item disabled key={'jksearch1'}>
                  <Input className={styles.lmgsearch} placeholder="请输入关键字搜索" onChange={(e) => {
                    this.filterSearchKc(e.target.value)
                  }} />
                </Menu.Item>
                {
                  common.length ? common.map((item, key) => {
                    if (key === 0 && item.truckId === '查看全部') {
                      return (<Menu.Item key={key} className={styles.commonMenu} style={{ paddingLeft: '30px' }}>{item.truckId}</Menu.Item>)
                    } else {
                      return (
                        <Menu.Item key={key} className={styles.commonMenu} style={{ height: '50px', lineHeight: '22px', paddingLeft: '30px' }}>
                          <div className={styles.truckItem}>{item.truckId}{this.filterState(item.action)}</div>
                          {/* <div className={styles.truckItem}>预计到达时间： {item.currRouteNo === '1' ? item.firstEndTime : item.currRouteNo === '2' ? item.secondEndTime : null}</div> */}
                        </Menu.Item>
                      )
                    }
                  }) : null
                }
              </SubMenu>
            </Menu>
            <Menu
              onSelect={(val) => {
                if (val.key === '0') {
                  this.setState({
                    longmenData: {ty:'lmd'},
                    comData: [],
                    open: true,
                    longmenKey: val.selectedKeys,
                    resourceDistributionSelect: [],
                    truckScheduleResultListSelect:[],
                    wiScheduleResultListSelect:[],
                    tBridgeData: [],
                    openGT: false
                  }, () => {
                    drawGantryCraneAll(this)
                  })
                } else {
                  var flootList = longmen[val.keyPath[1]];
                  var filterData = flootList.filter(item => item.ids === val.key)
                  this.setState({
                    longmenData: filterData,
                    comData: [],
                    open: true,
                    longmenKey: val.selectedKeys,
                    resourceDistributionSelect: [],
                    truckScheduleResultListSelect:[],
                    wiScheduleResultListSelect:[],
                    tBridgeData: [],
                    openGT: false
                  }, () => {
                    drawGantryCrane(this)
                  })
                }
              }}
              onClick={(val) => {
                if (val.key == longmenKey[0]) {
                  this.setState({
                    longmenData: [],
                    comData: [],
                    longmenKey: [],
                    open: false,
                    openGT: false
                  }, () => {
                    drawGantryCrane(this)
                  })
                }
              }}
              onOpenChange={(data) => {
                this.setState({
                  openKeys: data
                })
              }}
              style={{ width: 256 }}
              selectedKeys={longmenKey}
              openKeys={openKeys}
              mode="inline"
            >
              <SubMenu key="lmd" title="龙门吊调度结果">
                <Menu.Item disabled key={'lmdsearch1'}>
                  <Input className={styles.lmgsearch} placeholder="请输入关键字搜索" onChange={(e) => {
                    this.filterSearchLmd(e.target.value)
                  }} />
                </Menu.Item>
                {
                  longmen.length ? longmen.map((item, key) => {
                    if (key === 0 && item.gantryID === '查看全部') {
                      return (<Menu.Item key={'0'}>{item.gantryID}</Menu.Item>)
                    } else {
                      return (
                        <SubMenu key={key} title={item[0].gantryID}>
                          {
                            item.length && item.map((it, index) => {
                              return (
                                // <Menu.Item key={it.ids}>{it.gantryID}——{it.queueId}</Menu.Item>
                                <Menu.Item key={it.ids}>{it.queueId}——{it.wino}</Menu.Item>
                              )
                            })
                          }
                        </SubMenu>
                      )
                    }
                  }) : null
                }
              </SubMenu>
            </Menu>
            <Menu
              onSelect={(val) => {
                if (val.key === '0') {
                  this.setState({
                    tBridgeData: [],
                    drawerData: [],
                    open: false,
                    tBridgeKey: val.selectedKeys,
                    longmenData: [],
                    comData: [],
                    resourceDistributionSelect: [],
                    truckScheduleResultListSelect:[],
                    wiScheduleResultListSelect:[],
                    openGT: false
                  }, () => {
                    drawTravellingBridgeAll(this)
                  })
                } else {
                  var flootList = tBridge[val.keyPath[1]];
                  var filterData = flootList.filter(item => item.ids === val.key)
                  this.setState({
                    tBridgeData: filterData,
                    open: true,
                    tBridgeKey: val.selectedKeys,
                    drawerData: filterData,
                    longmenData: [],
                    comData: [],
                    resourceDistributionSelect: [],
                    truckScheduleResultListSelect:[],
                    wiScheduleResultListSelect:[],
                    openGT: false
                  }, () => {
                    drawTravellingBridge(this)
                  })
                }
              }}
              onClick={(val) => {
                if (val.key == tBridgeKey[0]) {
                  this.setState({
                    tBridgeData: [],
                    drawerData: [],
                    tBridgeKey: [],
                    open: false,
                    longmenData: [],
                    comData: [],
                    openGT: false
                  }, () => {
                    drawTravellingBridge(this)
                  })
                }
              }}
              onOpenChange={(data) => {
                this.setState({
                  openKeys: data
                })
              }}
              style={{ width: 256 }}
              selectedKeys={tBridgeKey}
              openKeys={openKeys}
              mode="inline"
            >
              < SubMenu key="qd" title="桥吊调度结果">
                <Menu.Item disabled key={'qdsearch1'}>
                  <Input className={styles.lmgsearch} placeholder="请输入关键字搜索" onChange={(e) => {
                    this.filterSearchQd(e.target.value)
                  }} />
                </Menu.Item>
                {
                  tBridge.length ? tBridge.map((item, key) => {
                    if (key === 0 && item.craneId === '查看全部') {
                      return (<Menu.Item key={'0'}>{item.craneId}</Menu.Item>)
                    } else {
                      return (
                        <SubMenu key={key} title={item[0].craneId}>
                          {
                            item.length && item.map((it, index) => {
                              return (
                                // <Menu.Item key={it.ids}>{it.craneId}——{it.queueId}</Menu.Item>
                                <Menu.Item key={it.ids}>{it.queueId}——{it.preWINo}</Menu.Item>
                              )
                            })
                          }
                        </SubMenu>
                      )
                    }
                  }) : null
                }
              </SubMenu>
            </Menu>
            <Menu
              onSelect={(val) => {
                this.setState({
                  truckScheduleResultListSelect : truckScheduleResultList[val.key],
                  resourceDistributionSelect: [],
                  wiScheduleResultListSelect:[],
                  truckScheduleKey: val.selectedKeys,
                  tBridgeData: [],
                  longmenData: [],
                  comData: [],
                  open: true,
                  openGT: false
                })
              }}
              style={{ width: 256 }}
              // selectedKeys={resourceDistriKey}
              mode="inline"
            >
              <SubMenu key="sub1" title="集卡调度结果">
                <Menu.Item disabled key={'zlsearch2'}>
                  <Input className={styles.lmgsearch} placeholder="请输入关键字搜索" onChange={(e) => {
                    this.filterSearchJK(e.target.value)
                  }} />
                </Menu.Item>
                {
                  truckScheduleResultList !== null && truckScheduleResultList.length ? truckScheduleResultList.map((item, key) => {
                    return (
                      <Menu.Item key={key} className={styles.commonMenu}>{item.truckId}</Menu.Item>
                    )
                  }) : null
                }
              </SubMenu>
            </Menu>
            <Menu
              onSelect={(val) => {
                this.setState({
                  resourceDistributionSelect: resourceDistributionList[val.key],
                  resourceDistriKey: val.selectedKeys,
                  tBridgeData: [],
                  longmenData: [],
                  truckScheduleResultListSelect:[],
                  wiScheduleResultListSelect:[],
                  comData: [],
                  open: true,
                  openGT: false
                })
              }}
              style={{ width: 256 }}
              // selectedKeys={resourceDistriKey}
              mode="inline"
            >
              <SubMenu key="sub1" title="资源计划结果">
                <Menu.Item disabled key={'zlsearch1'}>
                  <Input className={styles.lmgsearch} placeholder="请输入关键字搜索" onChange={(e) => {
                    this.filterSearchZl(e.target.value)
                  }} />
                </Menu.Item>
                {
                  resourceDistributionList !== null && resourceDistributionList.length ? resourceDistributionList.map((item, key) => {
                    return (
                      <Menu.Item key={key} className={styles.commonMenu}>{item.powID}</Menu.Item>
                    )
                  }) : null
                }
              </SubMenu>
            </Menu>
            <Menu
              onSelect={(val) => {
                this.setState({
                  wiScheduleResultListSelect : wiScheduleResultList[val.key],
                  truckScheduleResultListSelect : [],
                  resourceDistributionSelect: [],
                  truckScheduleKey: val.selectedKeys,
                  tBridgeData: [],
                  longmenData: [],
                  comData: [],
                  open: true,
                  openGT: false
                })
              }}
              style={{ width: 256 }}
              // selectedKeys={resourceDistriKey}
              mode="inline"
            >
              <SubMenu key="sub3" title="指令调度结果">
                <Menu.Item disabled key={'zlsearch2'}>
                  <Input className={styles.lmgsearch} placeholder="请输入关键字搜索" onChange={(e) => {
                    this.filterSearchDD(e.target.value)
                  }} />
                </Menu.Item>
                {
                  wiScheduleResultList !== null && wiScheduleResultList.length ? wiScheduleResultList.map((item, key) => {
                    return (
                      <Menu.Item key={key} className={styles.commonMenu}>{item.wino}</Menu.Item>
                    )
                  }) : null
                }
              </SubMenu>
            </Menu>
            <Menu
              onClick={(val) => {
                // window.open("http://10.168.86.2:8080")
                this.setState({
                  openGT:true
                })
                // jkCoordinate(this)
              }}
              style={{ width: 256 }}
              selectedKeys={['']}
              mode="inline"
            >
              <Menu.Item key="gt">船舶分路甘特图</Menu.Item>
            </Menu>
          </div> : null
      }
      {
        openGT?<div className={styles.iframe_gt}>
          <iframe src="http://10.168.86.2:8080" height='100%' width='100%'></iframe>
        </div>:null
      }
      
      <div id="map-div" className={styles.container}></div>
    </div >
  }
}
